<template>
  <a-modal
    title="设置菜单"
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <menuTree
      :style="{flex:'0 20%'}"
      ref="menuTree"
      @checkTreeNode="selectMenu"
      :checkable="true"
      :expandAll="true"
      :oldKeys="oldMenus"
    />
  </a-modal>
</template>

<script>
import menuTree from "@/syscomponents/menuTree.vue";
import {setUserWithMenu,getMenuByUserId} from "./api"
export default {
  components: { menuTree },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      userId: null,
      selectMenus:[],
      oldMenus:[]
    };
  },
  mounted(){
    //this.$refs.menuTree.menuTree()
  },
  methods: {
    showModal(userId) {
      this.userId = userId;
      this.visible = true;
      getMenuByUserId(userId).then(v=>{
          if(v.ok){
              this.oldMenus = v.data
              this.$refs.menuTree.menuTree()
          }else{
              this.$message.error(v.msg||'获取初始化数据失败')
          }
      })
    },
    selectMenu(keys, e) {
      this.selectMenus = keys.map(v => {
        return { userId: this.userId, menuId: v };
      });
    },
    handleOk(e) {
      this.confirmLoading = true;
      setUserWithMenu(this.selectMenus).then(v=>{
          if(v.ok){
            this.visible = false;
            this.confirmLoading = false;
          }else{
            this.$message.error(v.msg||'操作失败')
          }
      })
    },
    handleCancel(e) {
      this.confirmLoading = false;
      this.visible = false;
    }
  }
};
</script>

<style>
</style>